<template>
  <!-- 歌单 -->
  <div
    class="songList"
    v-title
    :data-title="$t('router.SongListNationalTitle')"
  >
    <v-nav></v-nav>
    <ul class="tag-lang">
      <li
        v-for="(item, index) of tagList"
        @click="chooseTag(item, index)"
        :class="tagActive == index ? 'active' : ''"
        :key="item.code"
        v-text="$i18n.locale === 'zh' ? item.cname : item.name"
      ></li>
    </ul>
    <div class="main">
      <div class="box left">
        <h5>{{ $t("main.file") }}</h5>
        <ul
          v-infinite-scroll="load"
          infinite-scroll-disabled="isPage"
          infinite-scroll-delay="120"
          infinite-scroll-distance="10"
          infinite-scroll-immediate="false"
        >
          <li
            v-for="(item, index) of fileList"
            :class="index == fileIndex ? 'fileActive' : ''"
            @click="fileToggle(item.dirId, index)"
            :key="item.dirId"
          >
            <p :title="item.dirName">
              {{
                $i18n.locale === "zh"
                  ? item.dirCname || item.dirName
                  : item.dirName
              }}
            </p>
            <span v-if="item.songSheetCount">({{ item.songSheetCount }})</span>
          </li>
        </ul>
      </div>
      <div class="box right">
        <el-table
          ref="singleTable"
          class="pointer-table"
          :data="tableData"
          highlight-current-row
          tooltip-effect="dark"
          @current-change="handleCurrentChange"
          height="100%"
        >
          <el-table-column min-width="5%">
            <template slot-scope="scope">
              <div
                class="isPlay"
                :class="
                  playParentId == scope.row.songSheetId && playing
                    ? 'playing'
                    : ''
                "
              >
                <svg-icon
                  @click.stop="play('pause', scope.row)"
                  name="pause"
                  class="icon icon-pause"
                />
                <svg-icon
                  @click.stop="play('play', scope.row)"
                  name="play"
                  class="icon icon-play"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('public.playlistNO')"
            min-width="30%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
              &nbsp;
              <span
                v-text="
                  $i18n.locale == 'zh'
                    ? scope.row.cname || scope.row.name
                    : scope.row.name
                "
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="trackCount"
            :label="$t('main.chapter')"
            min-width="10%"
            align="center"
          ></el-table-column>
          <el-table-column :label="$t('main.duration')" min-width="15%">
            <template slot-scope="scope">
              <span
                v-text="utils.formatSecondTime(scope.row.totalTiming)"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('main.author')"
            min-width="15%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span
                v-text="scope.row.author || $t('public.noInformation')"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('main.creationDate')"
            min-width="22%"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-text="utils.formateDate(scope.row.createTime)"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import vNav from "@/components/common/header/Nav";
export default {
  data() {
    return {
      tagList: [], //歌单分类列表
      tagActive: 0,
      fileList: [], //文件夹
      fileIndex: 0,
      tableData: [],
      fullscreenLoading: false,
      // 当前选中行
      // currentRow: null,
      // 请求参数
      params: {
        // 返回数量
        pageSize: 15,
        // 当前页数
        pageNum: 1,
        code: "",
      },
      isPage: false, //显示加载更多或分页
      isOnce: true, // load时防止重新赋值
    };
  },
  components: {
    vNav,
  },
  computed: {
    ...mapGetters([
      "loginStatu",
      "playLists",
      "playing",
      "currentSong",
      "playParentId",
      "isIE",
    ]),
  },
  watch: {},
  mounted() {
    if (this.isIE) {
      this.params.pageSize = 50;
    }
    this.getSongSheetCategory();
  },
  methods: {
    ...mapMutations({
      setPlayList: "SET_PLAYLIST",
      setDialogLogin: "SET_DIALOGLOGIN",
      setPlayParentId: "SET_PLAY_PARENT_ID",
      setPlayClipId: "SET_PLAY_CLIP_ID",
    }),
    ...mapActions([
      // 点击选择播放
      "selectPlay",
      // 点击播放全部
      "playAll",
      "playStatus",
      "savePlayList",
      "clearPlayList",
    ]),
    //获取歌单分类列表
    async getSongSheetCategory() {
      try {
        let res = await this.$api.national.getSongSheetCategory({});
        if (res.code === 1000000) {
          this.tagList = res.source ? res.source : [];
          this.params.code = res.source[0].code;
          this.getSongSheetDir();
        }
      } catch (e) {
        console.log(e);
      }
    },
    chooseTag(val, idx) {
      this.tagActive = idx;
      this.fileIndex = 0;
      this.params.code = val.code;
      this.getSongSheetDir();
    },
    //获取文件夹
    async getSongSheetDir() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.national.getSongSheetDir({ ...this.params });
        this.fullscreenLoading = false;
        if (res.code === 1000000) {
          this.fileList = res.source ? res.source : [];
          this.isOnce ? this.getSongSheet(res.source[0].dirId) : false;
          if (res.size < res.total) {
            this.isPage = false;
          } else {
            this.isPage = true;
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    //获取歌单
    async getSongSheet(id) {
      this.fullscreenLoading = true;
      let params = {
        dirId: id,
        code: this.params.code,
      };
      try {
        let res = await this.$api.national.getSongSheet(params);
        if (res.code === 1000000) {
          this.tableData = res.source ? res.source : [];
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 选中触发事件
    handleCurrentChange(val) {
      // this.currentRow = val;
      this.$router.push({
        name: "nationalSongListDetail",
        params: { id: val.songSheetId + "" },
      });
    },
    //播放
    async play(type, item) {
      this.setPlayParentId(item.songSheetId);
      this.setPlayClipId(null);
      if (type == "play") {
        let res = await this.$api.national.getSongSheetInfo({
          songSheetId: item.songSheetId,
        });
        this.savePlayList({
          list: res.source.musicCompositions,
          location: "start",
        });
        this.selectPlay({
          list: this.playLists,
          index: res.source.musicCompositions[0].trackId,
        });
      } else if (type == "pause") {
        this.playStatus(false);
      }
    },
    //文件夹切换
    fileToggle(val, idx) {
      this.fileIndex = idx;
      this.getSongSheet(val);
    },
    // 加载更多
    load() {
      this.isOnce = false;
      this.params.pageSize += 10;
      this.getSongSheetDir();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  min-height: 580px;
  display: flex;
  justify-content: space-between;
  .box {
    background: #f5f5f5;
  }
  .left {
    width: 200px;
    > h5 {
      height: 47px;
      line-height: 47px;
      padding: 0 16px;
      color: #666666;
      width: 100%;
      border-bottom: #e9e9e9 solid 1px;
    }
    > ul {
      > li {
        display: flex;
        align-items: center;
        padding: 0 16px;
        margin: 24px 0;
        cursor: pointer;
        p {
          max-width: 135px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &.fileActive,
        &:hover {
          color: #a1322c;
        }
      }
    }
  }
  .right {
    width: calc(100% - 230px);
    min-height: 580px;
    .el-table {
      .isPlay {
        .icon {
          font-size: 20px;
        }
      }
      .el-table__row {
        .playBtn {
          cursor: pointer;
          color: #a1322c;
          font-size: 30px;
        }
      }
      .icon-pause {
        display: none;
      }
      .playing {
        .icon-pause {
          display: flex;
        }
        .icon-play {
          display: none;
        }
      }
    }
  }
}
</style>
